<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>01 - The Star Component</title>
</head>
<body>
<div id="react-container"></div>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

<script type="text/babel">

    const { render } = ReactDOM

    const Star = ({ selected=false, onClick=f=>f }) =>
      <div className={(selected) ? "star selected" : "star"}
           onClick={onClick}>
      </div>

    Star.propTypes = {
      selected: PropTypes.bool,
      onClick: PropTypes.func
    }

    render(
      <Star selected={true} onClick={() => console.log('Star Click')} />,
      document.getElementById('react-container')
    )


</script>

</body>
</html>
